<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1">
<title></title>
<style type="text/css">
* {margin: 0;padding: 0;padding-bottom: 0px;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  			-webkit-tap-highlight-color: transparent;
  			
  				-webkit-touch-callout:none;  /*系统默认菜单被禁用*/     
			    -webkit-user-select:none; /*webkit浏览器*/     
			    -khtml-user-select:none; /*早期浏览器*/     
			    -moz-user-select:none;/*火狐*/     
			    -ms-user-select:none; /*IE10*/     
			    user-select:none; 
		}
		*:hover,*:active{
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  			-webkit-tap-highlight-color: transparent;
		}
body{background-color: #ebebeb;font-size:1em;line-height: 1;padding-bottom:3em;width:100%;font-family: -apple-system-font, "Helvetica Neue", sans-serif;line-height: 1;background-color: #FFFFFF;}
.row{width:100%;}
h3{font-size:0.85em;margin-top:1em;color: #666;font-weight: 400;margin-bottom: 0.75em;}
.specification,.tag{width:100%;}
.specification ul,.tag ul{list-style-type:none;width:100%;display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}
.specification ul li,.tag ul li{padding: 0.5em 1.25em;
    font-size: 0.9em;
    display: block;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #c9c9c9;
    font-weight: 400;
    border-radius: 3px;}
.specification ul li.select,.tag ul li.select{
    color: #2c53de;
    border: 1px solid #2c53de;}
.specification ul li.disabled,.tag ul li.disabled{color: #999;}
    .preview{padding: 0.5em 3%;}
</style>
</head>
<body>
<div class="container" id="container">
	<div class="page js_show home">
		<div class="page preview js_show" id="box">
		
		</div> 	
		 <div class="page preview js_show" id="tag">

        	</div>
	</div>
</div>
<script type="text/javascript">
	var JsonData = <?php echo $json; ?>;
	var productId = '<?php echo $product_id;?>' //当前产品的id
	var sortId = '<?php echo $sort;?>' //当前产品的sort
	var quantity ='<?php echo $quantity;?>'//当前产品数量
	var goods_price ='<?php echo $goods_price;?>'//当前产品数量
	var goods_number ='<?php echo $goods_number;?>'//当前产品数量

	var defaultData = <?php echo $varaint;?>;//{'1': "柚子", '2': "8寸", '3': "超级辣", '4': "非常多"};
	 var defaultTagData = <?php echo $tags;?>

	
	
		//console.log(JsonData)
		/*JsonData = {
		    "property": [
		        {
		            "product_id": "10",
		            "lable": "颜色",
		            "value": [
		                "白色",
		                "红色",
		                "灰色",
		                
		            ],
		            "sort": "1"
		        },
		        {
		            "product_id": "10",
		            "lable": "型号",
		            "value": [
		                "L",
		                "M"
		            ],
		            "sort": "2"
		        },
		        {
		            "product_id": "10",
		            "lable": "长度",
		            "value": [
		                "3cm",
		                "4cm"
		            ],
		            "sort": "3"
		        }
		    ],
		    "variant": [
		        {
		            "product_id": "10",
		            "property": [
		                {
		                    "key": 1,
		                    "value": "白色"
		                },
		                {
		                    "key": 2,
		                    "value": "L"
		                },
		                {
		                    "key": 3,
		                    "value": "4cm"
		                }
		            ],
		            "price": "100.00",
		            "is_limited": "0",
		            'quantity':"1"
		        },
		        {
		            "product_id": "10",
		            "property": [
		                {
		                    "key": 1,
		                    "value": "红色"
		                },
		                {
		                    "key": 2,
		                    "value": "L"
		                },
		                {
		                    "key": 3,
		                    "value": "3cm"
		                }
		            ],
		            "price": "100.00",
		            "is_limited": "0",
		            'quantity':"1"
		        },
		        {
		            "product_id": "10",
		            "property": [
		                {
		                    "key": 1,
		                    "value": "白色"
		                },
		                {
		                    "key": 2,
		                    "value": "M"
		                }
		            ],
		            "price": "100.00",
		            "is_limited": "0",
		            'quantity':"0"
		        },
		        {
		            "product_id": "10",
		            "property": [
		                {
		                    "key": 1,
		                    "value": "红色"
		                },
		                {
		                    "key": 2,
		                    "value": "M"
		                },
		                {
		                    "key": 3,
		                    "value": "3cm"
		                }
		            ],
		            "price": "100.00",
		            "is_limited": "0",
		            'quantity':"1"
		        }
		    ]
		};*/
	
	var res = []
	var num = 0;
 	var number = 0;
	var property = JsonData.property;
	var variant = JsonData.variant;
	var tags = JsonData.tags;
	var box = document.getElementById('box');
	var tag = document.getElementById('tag');

	var test = '';
	 //通信对象
	 if( ! jsCxsm){
		 var jsCxsm = {
				 //预览订单
				 commit:function(status){
// 					 test = test + status
// 					 box.innerHTML = test;
					try{
						 commit(status)
					}catch(e){
						test = test +'IOS调用了错误了<br>';
						test = test + e.name + ": " + e.message;
						//box.innerHTML = test;
					}
					 
// 					 test = test +'IOS调用了<br>';
// 					 box.innerHTML = test;
				 },
		 }	
// 		 test = test + 'IOS初始化了<br>';
// 		 box.innerHTML = test;
		 document.title = 'jsCxsm对象不存在，则说明你是ios'; 
	 }else{
		 document.title = 'jsCxsm对象存在，则说明你是android'; 
	 }
	//规格
	for(var k in property){
		var divitem = document.createElement('div');
		divitem.setAttribute('class', 'item row');
		divitem.setAttribute('id', 's'+property[k].sort);
		box.appendChild(divitem);
		var h3 = document.createElement('h3');
		divitem.appendChild(h3);
		h3.innerHTML = property[k].lable;
		var specification = document.createElement('div');
		specification.setAttribute('class', 'specification');
		divitem.appendChild(specification);
		var ul = document.createElement('ul');
		specification.appendChild(ul);
		for(var kk in property[k].value){	
			var li = document.createElement('li');
			li.innerHTML = property[k].value[kk];
			li.setAttribute('class', '');
			ul.appendChild(li);
		}
	}

	var li = box.getElementsByTagName('li');
	var length = li.length
	for(var i = 0; i < length; i++){
		li[i].onclick = function(){
			select(this,1);
		}
	}
 //标签
    for(var k in tags){
        var divitem = document.createElement('div');
        divitem.setAttribute('class', 'item row');
        divitem.setAttribute('id', 't'+tags[k].sort);
        tag.appendChild(divitem);
        var h3 = document.createElement('h3');
        divitem.appendChild(h3);
        h3.innerHTML = tags[k].tag_name;
        var tagSpe = document.createElement('div');
        tagSpe.setAttribute('class', 'tag');
        divitem.appendChild(tagSpe);
        var ul = document.createElement('ul');
        tagSpe.appendChild(ul);
        for(var kk in tags[k].tag_value){
            var li = document.createElement('li');
            li.innerHTML = tags[k].tag_value[kk];
            li.setAttribute('class', '');
            ul.appendChild(li);
        }
    }

    var li = tag.getElementsByTagName('li');
    var length = li.length
    for(var i = 0; i < length; i++){
        li[i].onclick = function(){
            select(this,2);
        }
    }
	
	function select(ele,type){
		
		if(ele != null){
			var classe = ele.getAttribute('class');
			if(classe.indexOf('disabled') > -1){
				return;
			}
	
			var li = ele.parentNode.getElementsByTagName('li');
			var length = li.length;
			for(var i = 0;i < length; i++){
				if(li[i].getAttribute('class').indexOf('select') > -1){
					li[i].setAttribute('class', '');
				}
			}
	
			var selected = true;
			if(classe.indexOf('select') <= -1){
				ele.setAttribute('class', 'select');
			}else if(classe.indexOf('select') > -1){
				ele.setAttribute('class', '');
				var len = getSelectedData().length;//规格
               			 var len2 = getSelectedTagData().length;//属性
				 if(len == 0){
					init();
					console.log('一个也没有选')
					var status = {"status":"0","message":"没有选择","data":{},"edit":{}}
					status = JSON.stringify(status)
					jsCxsm.commit(status)
					return;
				}
				if(len2 == 0){
		                    init();
		                    var status = {"status":"0","message":"没有选择","data":{},"edit":{}}
		                    status = JSON.stringify(status)
		                    jsCxsm.commit(status)
		                    return;
		                }
				selected = false;
			}
		}

		var data = defaultData;
		var dataTag = defaultTagData;
		if(defaultData == null){
			data = getSelectedData(); 
			dataTag = getSelectedTagData();
		}else{

			for(var k in data){
				var p = document.getElementById('s'+k);
				var li = p.getElementsByTagName('li');
				var len = li.length;
				for(var i = 0;i < len; i ++){
					if(li[i].innerHTML == data[k]){
						li[i].setAttribute('class', 'select');
					}
				}
			}
			for(var k in dataTag){
                var p = document.getElementById('t'+k);
                var li = p.getElementsByTagName('li');
                var len = li.length;
                for(var i = 0;i < len; i ++){
                    if(li[i].innerHTML == data[k]){
                        li[i].setAttribute('class', 'select');
                    }
                }
            }
			defaultData = null;
		}
		
		var temp = [];
		for(var k in data){
			var key = k;
			var text = data[k];
			for(var kk in variant){
				var tA = variant[kk].property;
				if(variant[kk].quantity <= 0 ) continue;
				var b = false;
				for(var kkk in tA){
					if(key == tA[kkk].key && tA[kkk].value == text){
						b = true;
						break;
					}
				}

				if(b){
// 					console.log(variant[kk])
					for(var kkk in tA){
						var tKey = tA[kkk].key;
						if(key != tKey){

							if( ! temp[tKey]){
								temp[tKey] = [];
							}

							if( ! temp[tKey][key]){
								temp[tKey][key] = [];
							}
							temp[tKey][key][temp[tKey][key].length] = tA[kkk].value;
						}
					}
				}
			}
		}
		
		
		//+-----------------------------------------------
		//| 获取最后的组合
		//+-------------------------------------------------
		for (var va in variant) {
			var is_true = false
			for(var ii in data){
				if (data[ii] != variant[va].property[ii-1].value) {
					is_true = false
					break;
				}
				is_true = true
			}
			
			if (is_true) {
				res = variant[va];
				console.log(res)
			}
		}
        var tagStr = '|';
        for (var va in tags) {
            var is_tag = false
            for(var it in dataTag){
                for(var kk in tags[va].tag_value){

                    if (dataTag[it] == tags[va].tag_value[kk]) {
//                        tagStr +=  tags[va].tag_name+':'+dataTag[it]+'|';
                        tagStr +=  dataTag[it]+'|';
                        is_tag = false
                        break;
                    }
                }

                is_tag = true
            }

        }
		
		//是否选项完成
		if ((num > 0 && num == property.length) || (number > 0 && number == tags.length)) {
			//选完
			var label = '';
			if(num>0){
                for (var i = 0; i < res['property'].length; i++) {
                    if(label){
                        label +='/'
                    }
                    label += res['property'][i].value
                }
			}
            var labelTag = '';
            if(number>0){
                labelTag = tagStr;
            }
            if(res.length == 0){
                res['sort'] = '0';
                res['price'] = goods_price;
                res['quantity'] = goods_number;
            }
            if(!sortId){
                sortId = 0;
            }
            if (number != tags.length) {
                return false;
            }
            if (num != property.length) {
                return false;
            }
            var status = {
					"status":"1",
					"message":"选择完成",
					"data":{
						//app使用参数
						"price":res['price'],			//组合价格
						"quantity":res['quantity'],   	//组合数量
					    "label":label,					//规格
                        "tags":labelTag				//属性
					},
					"edit":{
						//接口参数
// 						"quantity":quantity, [APP重新获取用户输入后传入]
						"product_id":productId, 	//产品id
						"sort":sortId,				//产品当前sort
						"change_sort":res['sort'], 	//选择后的sort
						"tags":labelTag				//属性
					},
					"add":{
						"product_id":productId, 	//产品id
						"sort":res['sort'],	//选择后的sort
						"tags":labelTag				//属性
					}
				}
			console.log('------');
			console.log(status);
			//$('.container').before('您的参数:'+sortId+productId+'<br>');
			status = JSON.stringify(status)
			jsCxsm.commit(status)//回调到list 的 setChangeVariant()方法
// 			test = test + '选择完成<br>';
// 			box.innerHTML = test
		}else{
			//没有选完
			var status = {"status":"0","message":"没有选择","data":{},"edit":{}}
			status = JSON.stringify(status)
			jsCxsm.commit(status)
		}
		
		for(var k in temp){
			var tA = getSameValue(temp[k]);
			var p = document.getElementById('s'+k);
			var li = p.getElementsByTagName('li');
			for(var i = 0; i < li.length; i++){
				var b = false;
				for(var j = 0; j < tA.length; j++){
					if(li[i].innerHTML == tA[j]){
						b = true;
					}
				}

				if(b){
					if(li[i].getAttribute('class').indexOf('select') == -1){
						li[i].setAttribute('class', '');	
					}	
				}else{
					li[i].setAttribute('class', 'disabled');
				}
			}
		}
	}

	
	function getSameValue(data){
		var result = new Array();
		var obj = {};
		for(var k in data){
			var temp = data[k];
			var len = temp.length;
			var key = k;
			for (var i = 0; i < len; i++) {
				var bb = true;
				for(var kk in data){
					var t = data[kk];
					var b = false;	
					var kkk = kk;	
					for(var j = 0;j < t.length; j++){
						if(temp[i] == t[j]){
							b = true;
							break;
						}
					}

					if( ! b){
						bb = false;
						break;
					}
				}

				if(bb){
					result.push(temp[i]);
				}
			}
			break;
		}
		return result; 
	}

	function getSelectedData(){
		var data = [];
		num = 0;
		var li = box.getElementsByTagName('li');
		var length = li.length;
		var k = 0;
		for(var i = 0;i < length; i ++){
			var c = li[i].getAttribute('class');
			if(c.indexOf('select') > -1){
				data[getParentId(li[i])] = li[i].innerHTML; 
				num++;
				k++;
			}
		}
		return data;
	}
    function getSelectedTagData(){
        var data = [];
        number = 0;
        var li = tag.getElementsByTagName('li');
        var length = li.length;
        var k = 0;
        for(var i = 0;i < length; i ++){
            var c = li[i].getAttribute('class');
            if(c.indexOf('select') > -1){
                data[getParentId(li[i])] = li[i].innerHTML;
                number++;
                k++;
            }
        }

        return data;
    }

	function getParent(ele){
		return ele.parentNode.parentNode.parentNode;
	}

	function getParentId(ele){
		return getParent(ele).getAttribute('id').replace('s', '');
	}

	function getliByPidAndText(pid, text){

		var li = document.getElementById('s'+pid).getElementsByTagName('li');
		var len = li.length;
		for(var i = 0;i < len; i++){
			if(li[i].innerHTML == text){
				return li[i];
			}
		}
		return null;
	}

	function getLiByParent(ele){
		return ele.getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('li');
	}
	init();
	function init(){
		var p = box.getElementsByTagName('div');
		for(var k in p){
			if(typeof(p[k]) != 'object' || p[k].getAttribute('class').indexOf('item') == -1) continue;
			var id = p[k].getAttribute('id').replace('s', '');
			var li = getLiByParent(p[k]);
			var length = variant.length;
			var lilength = li.length;
			for(var j = 0;j < lilength;j++){
				var selected = false;
				var text = li[j].innerHTML;
				for(var i = 0;i < length;i++){
					var len = variant[i].property.length;	
					var quantity = variant[i].quantity;	
					if(quantity > 0){
						for(var k = 0;k < len;k++){	
							var key = variant[i].property[k].key;
							var value = variant[i].property[k].value;
							var quantity = variant[i].quantity;
							if(key == id && text == value){
								selected = true;
								break;
							}
						}	
					}
				}

				if( ! selected){
					li[j].setAttribute('class', "disabled"); 
				}else{
					li[j].setAttribute('class', ""); 
				}
			}
		}

		if(defaultData != null)
		select(null);
	}
</script>
</body>
</html>
